<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YOUKU | SLIDE &quot;the second implementation&quot;</title>
<link href="css/youku.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_grids.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#poster .control .leftThumb {
	width:34px;
	height:70px;
	top:0;
	left:0;
	cursor:pointer;
	background: none transparent scroll repeat 0% 0%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://res.mfs.ykimg.com/051000004E6587EB97927331CF05E273.png");
	position:absolute;
	z-index:3;
}

#poster .control .rightThumb {
	width:34px;
	height:70px;
	top:0;
	right:0;
	cursor:pointer;
	background: none transparent scroll repeat 0% 0%;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://res.mfs.ykimg.com/051000004E6587EB97927331CF0DC4F6.png");
	position:absolute;
	z-index:3;
}
</style>
<![endif]-->
<!--
<script type="text/javascript" src="firebug-lite/build/firebug-lite-debug.js"></script>
-->
<script type="text/javascript" src="sizzle/sizzle.js"></script>
<script type="text/javascript" src="js/aider.js"></script>
<script type="text/javascript" src="js/youku.js"></script>
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#main" >Skip to main content (Press Enter).</a></li>
</ul>

  <div id="topnav" role="contentinfo">
    <div class="page_margins">
      <div class="page">
        <span class="navlinks">
  			<a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>
        </span>
        This is the perfect place for a secondary webpage title
      </div>
    </div>
  </div>

  <div id="nav" role="navigation">
    <div class="page_margins">
      <div class="page">
        <div class="hlist">
          <!-- main navigation: #nav_main -->
          <ul>
            <li><a href="../index.html">Table Of Contents <span>short desc</span></a>            </li>
            <li><a href="../08_special_interest/3col_fullheight.html">Next Example <span>short desc</span></a></li>
            <li><a href="fullpage_3col.html">Previous Example <span>short desc</span></a></li>
            <li><a href="#">Button 4<span>short desc</span></a></li>
            <li><a href="#">Button 5<span>short desc</span></a></li>
            <li class="active"><strong>Active Button<span>short desc</span></strong></li>
            <li><a href="#">Button 7<span>short desc</span></a></li>
            <li class="last" ><a href="#">Button 8<span>short desc</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div id="header" role="banner">
    <div class="page_margins">
      <div class="page">
    <h1>Example | Beispiel <em>&laquo;fullpage_grids&raquo;</em> </h1>
    <span>YAML &#8226; (X)HTML/CSS Framework</span>
      </div>
    </div>
  </div>

  <div id="extended">
    <div class="page_margins">
      <div class="page">
        <div class="subcolumns">
		  <div id="poster">
			<div class="posterOnePic">
			  <div class="items" style="width:20000px;">
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/1.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>1MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/2.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>2MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/3.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>3MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/4.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>4MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/5.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>5MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/6.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>6MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/7.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>7MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/8.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>8MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
				<div class="item">
				  <a href="#">
				  	<img src="images/slideImg/9.jpg" alt="" />
				  </a>
				  <div class="text">
					<div class="txtTitle">
						<h3>周董新单MV大玩纯爱</h3>
					</div>
					<div class="txtContent">
						<p>9MV中有周董2年前在洛杉矶拍《青蜂侠》时圣诞街头，对照台北圣诞氛围，呈现出感情，时空反差，呼应歌词 [ 也许在不用时空，还牵着你的手 ] </p>
					</div>
					<div class="txtFoot">
						<p>歌手：周杰伦</p>
						<p>MV：你好吗(120秒)</p>
						<p>首播时间：2011.12.5</p>
					</div>
				  </div>
				</div>
			  </div>	
			</div>
			<div class="control">
			  <div class="thumbs">
			  	<ul>
			  		<li class="current"><img src="images/slideImg/1_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/2_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/3_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/4_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/5_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/6_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/7_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/8_s.jpg" alt="" /></li>
			  		<li><img src="images/slideImg/9_s.jpg" alt="" /></li>
			  	</ul>
			  </div>
			  <div class="leftThumb"></div>
			  <div class="rightThumb"></div>
			</div>
		  </div>
        </div>
      </div>
    </div>
  </div>  

  <div id="main">
    <div class="page_margins">
      <div class="page">
        <div class="subcolumns">
          <div class="c50l">
            <div class="subcl">
              <!-- Insert your subtemplate content here -->
              <h2>H2 Heading</h2>
              <p class="floatbox"><img src="images/dummy_150.png" alt="dummy" class="float_left" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
              <div class="subcolumns">
                <div class="c33l">
                  <div class="subcl">
                    <!-- Insert your subtemplate content here -->
                    <h5>H5 Heading</h5>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                  </div>
                </div>
                <div class="c33l">
                  <div class="subc">
                    <!-- Insert your subtemplate content here -->
                    <h5>H5 Heading</h5>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                  </div>
                </div>
                <div class="c33r">
                  <div class="subcr">
                    <!-- Insert your subtemplate content here -->
                    <h5>H5 Heading</h5>
                    <ul>
                      <li>List Item 1</li>
                      <li>List Item 2</li>
                      <li>List Item 3</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c25l">
            <div class="subc">
              <!-- Insert your subtemplate content here -->
              <h3>H3 Heading</h3>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
            </div>
          </div>
          <div class="c25r">
            <div class="subcr">
              <!-- Insert your subtemplate content here -->
              <div class="info">
              <h3>About this example</h3>
              <p>This is a more advanced example to show the multiple usage of<code> .page_margins</code> and <code>.page</code> to create flexible full-page layouts in combination with YAML's powerful <a href="http://www.yaml.de/en/documentation/practice/subtemplates.html">subtemplates</a>.</p>
              <p>The upper <code>#main</code> content area (white background) is subdivided into three sections of 50% | 25% | 25% width.</p>
              <p>The lower <code>#extended</code> content area (gray background) is subdivided in the same way, but in addition uses YAML's equal heights solution to get these full height vertical column dividers.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="footer" role="contentinfo">
    <div class="page_margins">
      <div class="page">
     <p>Footer with copyright notice and status information<br />
        Layout based on <a href="http://www.yaml.de/">YAML</a></p>
      </div>
    </div>
  </div>
<script src="js/focusfix.js" type="text/javascript"></script>
<script type="text/javascript">
	var rooter = document.getElementById("poster"),
		poster = Sizzle("#poster > div.posterOnePic > div.items")[0],
		control = Sizzle("#poster > div.control")[0],
		nav_lt = Sizzle("div.leftThumb", control)[0],
		nav_rt = Sizzle("div.rightThumb", control)[0],
		thumbs = Sizzle("div.thumbs > ul > li", control);

	new Slide2({
		'rooter': rooter,
		'poster': poster,
		'nav_lt': nav_lt,
		'nav_rt': nav_rt,
		'thumbs': thumbs
	});	
</script>
</body>
</html>
